<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="icon" href="../images/bg.jpg" type="images/x-ico" /> -->
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<!-- <script src="./js/vue.js"></script> -->
	</head>
	<style>
		* {
			margin: 0;
			padding: 0
		}

		html,
		body {
			width: 100%;
			height: 100%;
			/* background-image: url(../images/007.jpg); */
			background-size: cover;
			overflow-y: hidden;
		}

		video {
			position: absolute;
			left: 100px;
			border: 10px solid white;
		}

		canvas {
			position: absolute;
			left: 150px;
			bottom: -20px;
		}

		button {
			position: absolute;
			width: 100px;
			height: 30px;
			top: 330px;
			left: 260px;
		}

		.result {
			position: absolute;
			width: 370px;
			height: 500px;
			right: 200px;
			top: 30px;
			/* border: 5px solid white; */
			text-align: center;
			padding: 20px;
			color: white;
			/* background: black; */
		}

		p {
			text-align: left;
			font-size: 20px;
			font-weight: 600;
			color: black;
			line-height: 30px;
		}
	</style>

	<body>
		<video id="video" width="400" height="300" autoplay></video>
		<button id="snap">Snap Photo</button>
		<canvas id="canvas" width="400" height="300"></canvas>

		<div class="result">
			<h1>人脸属性</h1>
			<p>"face_num"：{{ msg0 }}</p>
			<p>"face_token"：{{ msg1 }}</p>
			<p>"face_probability"：{{ msg2 }}</p>
			<p>"age"：{{ msg3 }}</p>
			<p>"beauty"：{{ msg4 }}</p>
			<p>"expressiton"：{{ msg5 }}</p>
			<p>"face_shape"：{{ msg6 }}</p>
			<p>"gender"：{{ msg7 }}</p>
			<p>"glasses"：{{ msg8 }}</p>
			<p>"race"：{{ msg9 }}</p>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script type="text/javascript">
		var aVideo = document.getElementById('video');
		var aCanvas = document.getElementById('canvas');
		var ctx = aCanvas.getContext('2d');

		navigator.getUserMedia = navigator.getUserMedia ||
			navigator.webkitGetUserMedia ||
			navigator.mozGetUserMedia ||
			navigator.msGetUserMedia; //获取媒体对象（这里指摄像头）
		navigator.getUserMedia({
			video: true
		}, gotStream, noStream); //参数1获取用户打开权限；参数二是一个回调函数，自动传入视屏流，成功后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息

		function gotStream(stream) {

			// video.src = URL.createObjectURL(stream); // 老写法
			aVideo.srcObject = stream;

			aVideo.onerror = function() {
				stream.stop();
			};
			stream.onended = noStream;
			aVideo.onloadedmetadata = function() {
				// alert('摄像头成功打开！');
			};
		}

		function noStream(err) {
			alert(err);
		}

		document.getElementById("snap").addEventListener("click", function() {
			ctx.drawImage(aVideo, 0, 0, 320, 240); //将获取视频绘制在画布上
		});

		//cancas 保存图片



		var a = '';
		$.ajax({
			//几个参数需要注意一下
			type: "post", //方法类型
			dataType: "json", //预期服务器返回的数据类型
			url: "http://localhost:3000/face/fa", // url
			// data: $('#form1').serialize(),
			success: function(res) {
				{
					console.log(res); //打印服务端返回的数据(调试用);
					a = res;
					// alert("提交成功！！！");
					// return a;
				}
			},
			async: false,
			error: function() {
				alert("提交异常！");
			},
		});
		console.log(a);
		var testResult = a;
		// var datalist = JSON.parse(a)

		// var vm = new Vue({
		// 	el: '.result', // 表示 我们 new的这个实例要去控制页面上的哪个区域
		// 	data: { //data中存放的是el中要用到的数据
		// 		msg0: testResult.result.face_num,
		// 		msg1: testResult.result.face_list[0].face_token,
		// 		msg2: testResult.result.face_list[0].face_probability,
		// 		msg3: testResult.result.face_list[0].age
		// 		//通过vue提供的指令就可以简单的把数据渲染到页面上，不提倡操作dom
		// 	}
		// });


		// {
		// 	"error_code": 0,
		// 	"error_msg": "SUCCESS",
		// 	"log_id": 1961937395,
		// 	"timestamp": 1663839161,
		// 	"cached": 0,
		// 	"result": {
		// 		"face_num": 1,
		// 		"face_list": [{
		// 			"face_token": "97e7e44f62c4526447a9bb442e2c6499",
		// 			"location": {
		// 				"left": 157.09,
		// 				"top": 148.92,
		// 				"width": 75,
		// 				"height": 80,
		// 				"rotation": -3
		// 			},
		// 			"face_probability": 1,
		// 			"angle": {
		// 				"yaw": 3.64,
		// 				"pitch": -3.2,
		// 				"roll": -7.18
		// 			},
		// 			"age": 21,
		// 			"beauty": 58.69
		// 		}]
		// 	}
		// }
	</script>

</html>
